<template>
  <el-menu class="el-menu-vertical-demo"
           @open="handleOpen"
           @close="handleClose"
           style="height: 100%;width: auto;border: 0px"
           background-color="#545c64"
           text-color="#fff"
           active-text-color="#ffd04b"
           :collapse="asideMenuStatus"
           :router="true">
    <h3 class="app-title">{{ appTitle }}</h3>
    <el-menu-item :index="item.path" v-for="(item) in noChildMenu" :key="item.path">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <el-submenu :index="item.path" v-for="(item) in hasChildMenu" :key="item.path">
      <template slot="title">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-submenu style="padding: 0px" :index="children.path" v-for="(children) in item.children" :key="children.path">
        <template slot="title">
          <i :class="children.icon"></i>
          <span slot="title">{{ children.label }}</span>
        </template>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "Common-aside",
  data() {
    return {
      // appName:'通用后台管理系统',
      menu: [
        {
          path: '/home',
          name: 'home',
          label: '首页',
          icon: 'el-icon-s-home'
        }, {
          path: '/home/goodmanage',
          name: 'goodmanage',
          label: '商品管理',
          icon: 'el-icon-shopping-bag-2'
        }, {
          path: '/home/users',
          name: 'users',
          label: '用户管理',
          icon: 'el-icon-s-custom'
        }, {
          label: '其他',
          icon: 'el-icon-menu',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'el-icon-tickets'
            }, {
              path: '/page2',
              name: 'page2',
              label: '页面2',
              icon: 'el-icon-tickets'
            }
          ]
        }
      ]
    };
  },
  computed: {
    asideMenuStatus() {
      return this.$store.getters['moduleHeader/getAsideStatus']
    },
    appTitle(){
      return this.$store.getters['moduleHeader/getAppTitle']
    },
    noChildMenu() {
      return this.menu.filter(item => !item.hasOwnProperty('children'));
    },
    hasChildMenu() {
      return this.menu.filter(item => item.hasOwnProperty('children'));
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped lang="less">

.app-title {
  height: 60px;
  width: auto;
  color: white;
  text-align: center;
  line-height: 60px;
  font-weight: 300;
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: auto;
  min-height: 400px;
  padding: 0 6px 0 6px;
}
</style>